<template>
  <div class="handle-page">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  name: "HandlePage",
  data(){
    return{
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  methods:{
    /**
     * 页数编码改变
     * @param val
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.$emit('queryInfo');
    },
    /**
     * 当前改变
     * @param val
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit('queryInfo');
    }
  }
}
</script>

<style scoped>

</style>
